<template>
	<view :class="themeName">
		<!-- pages/user_sgin/user_sgin.wxml -->
		<view class="user-sgin">
			<u-navbar title="每日签到" :bgColor="transparent" :border-bottom="none" :custom-back="home"></u-navbar>
			<view class="header">
				<view class="flex">
					<!-- 头像 -->
					<view class="flex m-l-40">
						<u-image class="avatar" width="110rpx" height="110rpx" shape="circle" :src="avatar" />
					</view>
					<!-- 积分和明细按钮 -->
					<view class="m-l-50 flex row-between" style="flex: 1">
						<!-- 积分 -->
						<view>
							<view class="flex">
								<view class="sm flex white fontAr" @click="toSignRule">
									我的积分
									<image src="https://cdn.zkjialan.com/img1/jifen_icon_help1.png" class="m-l-10"
										style="height: 30rpx; width: 30rpx;"></image>
								</view>
							</view>
							<view class="white" style="font-size: 66rpx;font-family: 'ab'; color: #000;">
								{{userIntegral}}
							</view>
						</view>
						<!-- 明细按钮 -->
						<view class="score-detail-entry flex" @click="toSignDetail">
							<text class="sm white">积分明细 ></text>
							<!-- <image style="width: 26rpx;height: 26rpx;flex: none; margin-right: 7rpx"
								src="https://cdn.zkjialan.com/img1/jifen_icon_data.png"></image> -->
						</view>
					</view>

				</view>
			</view>
			<view class="main">
				<!-- 签到列表 -->
				<view class="contain bg-white contain1" v-if="isOpen">
					<view class="title">已累积签到 {{continuousDays}}天</view>
					<view class="day-list flex flex-wrap">
						<view v-for="(item, index) in lists" :key="index" class="item flex-col row-center col-center">
							<view :class="'circle row-center ' + (item.is_sign ? 'active-circle' : '')">
								<image class="signIcon" src="https://cdn.zkjialan.com/user/signIcon2.png"
									v-if="item.is_sign"></image>
								<image class="signIcon" src="https://cdn.zkjialan.com/img/user/signIcon1.png" v-else>
								</image>
								<view class="num xs lighter" v-if="!item.is_sign">+{{item.integral}}</view>
								<view class="num num1 xs lighter" v-else>+{{item.integral}}</view>
							</view>
							<view class="day m-t-10 lighter sm" v-if="!item.is_sign">{{item.day}}</view>
							<view class="day day1 m-t-10 lighter sm" v-else>{{item.day}}</view>
						</view>
					</view>
					<view class="right-sgin">
						<button :class="'lighter br60 ' + (todaySign ? 'gray' : 'primary-button')" @tap="userSignFun"
							size="md">{{todaySign ? '已签到' : '立即签到' }}</button>
					</view>
				</view>
				<!-- 签到功能关闭 -->
				<view class="contain-no bg-white flex-col col-center row-center" v-if="!isOpen">
					<view class="">
						<u-image width="72rpx" height="72rpx" shape="circle"
							src="https://cdn.zkjialan.com/img1/user_sign_close.png" />
					</view>
					<view class="m-t-35 sm lighter">
						抱歉，该功能未开启
					</view>
				</view>
				<view class="box1">
					<view class="yiwancheng" v-if="earn[0].is_done">
						已完成
					</view>
					<view class="weiwancheng" v-else>
						未完成
					</view>
				</view>
				<view class="box2">
					<view class="weiwancheng" v-if="continuousDays!=7">
						未完成
					</view>
					<view class="yiwancheng" v-else>
						已完成
					</view>
				</view>
				<view class="box3">
					<button open-type="share" class="shareBtn"></button>
				</view>
				<!-- 赚积分 -->
				<!-- <view class="contain bg-white m-t-20" v-if="earn.length > 0">
					<view class="title flex">
						<view class="line br60 m-r-20"></view>
						<view class="bold xl">赚积分</view>
					</view>
					<view class="task">
						<view v-for="(item, index) in earn" :key="index" class="item flex row">
							<image class="img m-r-20" :src="item.icon">
							</image>
							<view class="con">
								<view class="md">{{item.name}}</view>
								<view class="xs">
									<text class="num mb20">+{{item.integral}}</text>
									<text>积分</text>
								</view>
							</view>
							<button hover-class="none" :class="'btn br60 ' + (item.is_done ? 'muted' : 'primary' )"
								:style="'border-color: ' + (item.is_done ? '#BBBBBB' : '#FF2C3C') + ';'"
								size="xs">{{item.is_done ? '已完成' : '未完成'}}</button>
						</view>
					</view>
				</view> -->
			</view>
		</view>

		<u-popup v-model="showPop" mode="center">
			<view class="pop-container">
				<view class="header-score flex row-center">+{{totalIntegral}}</view>
				<view class="box column-center">
					<!-- <view class="desc m-t-20 sm flex row-center">
						<view class="">
							获得
						</view>
						<image style="width: 28rpx; height: 30rpx;margin-right: 8rpx; margin-left: 8rpx"
							src="https://cdn.zkjialan.com/img1/icon_jifen.png"></image>
						<view class="">
							{{totalIntegral}}
						</view>
					</view> -->
					<view class="bottom-box">
						<view style="line-height: 23rpx;font-size: 23rpx;;font-family: 'ar';">
							您已累积签到 <text style="font-size: 23rpx; color: #f08229;font-family: 'ar'">{{days}}</text>天
						</view>
					</view>
					<view class="white  primary-btn" style="margin-top: 26rpx" @tap="onClose">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getSignList,
		userSign,
		getSignRule,
		apiSignLists,
		apiSign,
	} from "@/api/user";
	export default {
		data() {
			return {
				avatar: '', // 用户头像
				// nickname: '', // 用户昵称
				userIntegral: '', // 用户积分
				todaySign: '', // 用户今天是否已签到
				continuousDays: '', // 用户连续签到天数
				// 签到列表
				lists: [{
					day: '', // 天数
					integral: '', // 赠送积分数量
					is_sign: '', //	对应天数是否已签到	
				}],
				// 签到后返回数据
				totalIntegral: '', // 赠送积分数量
				days: '', // 连续签到次数

				earn: [], // 赚积分渠道

				showPop: false, // 签到弹窗

				isOpen: 0, // 是否开启签到功能 0-关闭 1-开启
				sharImage: ''
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// this.userSignFun = trottle(this.userSignFun, 1000, this)
			this.$request.get(`shopapi/home/slideshow_list?type=16`).then(res => {
				console.log(res.data.data.lists[0].img_url)
				this.sharImage = res.data.data.lists[0].img_url;
			})
		},


		onShow: function() {
			this.getSignLists()
		},
		onShareAppMessage() {
			const {
				code
			} = this.userInfo
			const share = {
				title: '签到领积分，积分换好礼！',
				path: `/bundle/pages/user_sign/user_sign?invite_code=${this.userInfo.code}`,
				imageUrl: this.sharImage
			}
			return share
		},
		methods: {
			home() {
				const pages = getCurrentPages();
				if (pages.length <= 1) {
					uni.switchTab({
						url: '/pages/index/index'
					});
				} else {
					uni.navigateBack();
				}
			},
			// 跳转到规则页面
			toSignRule() {
				uni.navigateTo({
					url: '/bundle/pages/sign_rule/sign_rule',
				})
			},

			// 跳转到积分明细页面
			toSignDetail() {
				uni.navigateTo({
					url: '/bundle/pages/sign_detail/sign_detail',
				})
			},

			onClose() {
				this.showPop = false
			},

			// 获取页面信息
			getSignLists() {
				apiSignLists()
					.then(res => {
						// console.log('hszzz', res)
						this.avatar = res.user.avatar
						this.continuousDays = res.user.continuous_days
						this.todaySign = res.user.today_sign
						this.userIntegral = res.user.user_integral

						this.lists = res.lists

						this.earn = res.earn

						this.isOpen = res.is_open
					})
			},

			// 点击签到
			userSignFun() {
				if (this.todaySign) {
					return;
				}

				apiSign()
					.then(res => {
						this.showPop = true;
						this.totalIntegral = res.total_integral
						this.days = res.days

						this.getSignLists()
					});
			}
		}
	}
</script>

<style lang="scss">
	.shareBtn {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		z-index: 1;
		opacity: 0;
	}

	.weiwancheng {
		position: absolute;
		width: 140rpx;
		height: 60rpx;
		background-color: #000;
		border-radius: 30rpx;
		left: 512rpx;
		top: 112rpx;
		color: #fff;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		font-size: 25rpx;
		font-family: 'am';
	}

	.yiwancheng {
		position: absolute;
		width: 140rpx;
		height: 60rpx;
		background-color: #bdbdbd;
		border-radius: 30rpx;
		left: 512rpx;
		top: 112rpx;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		font-size: 25rpx;
		font-family: 'am';
	}

	.box3 {
		position: relative;
		width: 670rpx;
		height: 287rpx;
		background: url('https://cdn.zkjialan.com/img/index/shareImg.png');
		background-size: 100% 100%;
		margin-top: 30rpx;
		margin-left: 20rpx;
	}

	.box2 {
		position: relative;
		width: 670rpx;
		height: 210rpx;
		background: url('https://cdn.zkjialan.com/img/user/signBg3.png');
		background-size: 100% 100%;
		margin-top: 30rpx;
		margin-left: 20rpx;
	}

	.box1 {
		position: relative;
		width: 670rpx;
		height: 210rpx;
		background: url('https://cdn.zkjialan.com/img/user/signBg2.png');
		background-size: 100% 100%;
		margin-top: 40rpx;
		margin-left: 20rpx;
	}

	.day1 {
		color: #000;
		font-family: 'ar';
	}

	.day {
		font-family: 'ar';
	}

	.signIcon {
		width: 77rpx;
		height: 107rpx;
	}

	.fontAr {
		font-family: 'ar';
		color: #000;
	}

	/deep/.u-icon__icon,
	.u-title {
		color: #000 !important;
	}

	/deep/ .u-navbar {
		background-color: transparent !important;
	}

	.user-sgin {
		padding-bottom: 100rpx;
		background: url('https://cdn.zkjialan.com/img/user/signBg.png');
		background-size: 100% 100%;
		height: 1622rpx;
		width: 750rpx;
	}

	.user-sgin .header {
		// background-image: url('');
		// background-repeat: no-repeat;
		// background-size: 100%;
		height: 370rpx;
		width: 750rpx;
		padding-top: 40rpx;
		box-sizing: border-box;
	}

	.user-sgin .header .avatar {
		border-radius: 50%;
		border: 4rpx solid #fff;
	}

	.user-sgin .main {
		z-index: 100;
		margin-top: -200rpx;
		width: 100%;
		top: 186rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.user-sgin .main .contain {
		border-radius: 10rpx;
	}

	.user-sgin .main .contain-no {
		height: 350rpx;
		border-radius: 10rpx;
		box-shadow: 0 5rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.user-sgin .main .contain .title {
		// padding: 24rpx 30rpx;
		margin-left: 30rpx;
		margin-top: 80rpx;
		font-size: 27rpx;
		font-family: 'am';
		color: #000;
		display: block;
	}

	.user-sgin .main .contain .title .line {
		width: 6rpx;
		height: 34rpx;
		background-color: #ff2c3c;
	}

	.user-sgin .main .day-list {
		width: 620rpx;
		margin-top: 45rpx;
		margin-left: 25rpx;
		display: flex;
		justify-content: space-between;
	}

	.user-sgin .main .day-list .item {
		width: 80rpx;
		margin-bottom: 10rpx;
	}

	.user-sgin .main .day-list .item .num {
		width: 68rpx;
		height: 68rpx;
		line-height: 58rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		/* background-color: #f2f2f2; */
		top: 40rpx;
		position: absolute;
		left: 6rpx;
	}

	.num1 {
		color: #f08229;
	}

	.user-sgin .main .day-list .item .circle {
		position: relative;
	}

	// .user-sgin .main .day-list .item .circle::before {
	// 	content: "";
	// 	width: 34rpx;
	// 	height: 6rpx;
	// 	position: absolute;
	// 	background-color: #f2f2f2;
	// 	right: 68rpx;
	// 	top: 34rpx;
	// }

	// .user-sgin .main .day-list .item:nth-of-type(7n+1) .circle::before {
	// 	content: "";
	// 	background-color: rgba(0, 0, 0, 0);
	// }

	// .user-sgin .main .day-list .item .active-circle::before {
	// 	content: "";
	// 	width: 34rpx;
	// 	height: 4rpx;
	// 	position: absolute;
	// 	background-color: #FFBD40;
	// 	right: 68rpx;
	// 	top: 34rpx;
	// }


	.user-sgin .main .right-sgin {
		// padding: 35rpx 145rpx;
		width: 330rpx;
		height: 80rpx;
		margin-top: 30rpx;
		margin-left: 170rpx;
	}

	.user-sgin .main .right-sgin .primary-button {
		color: #fff;
		// background: linear-gradient(270deg, rgba(249, 95, 47, 1) 0%, rgba(252, 67, 54, 1) 55%, rgba(255, 44, 60, 1) 100%);
		background-color: #f08229;
	}

	.user-sgin .main .contain .task {
		border-top: 1px solid $-color-border;
	}

	.user-sgin .main .contain .task .item {
		padding: 23rpx 30rpx;
	}

	.user-sgin .main .contain .task .item .img {
		width: 74rpx;
		height: 74rpx;
		border-radius: 22rpx;
	}

	.user-sgin .main .contain .task .item .con {
		flex: 1;
	}

	.user-sgin .main .contain .task .item .btn {
		width: 154rpx;
		border: 1px solid #FF2C3C;
	}

	.user-sgin .main .contain .task .item .con .num {
		color: #FF2C3C;
	}

	.user-sgin .main .contain .task .item .primary {
		color: #FF2C3C;
	}

	.score-detail-entry {
		// background-color: rgba(255, 255, 255, 0.3);
		border-radius: 100rpx 0rpx 0rpx 100rpx;
		padding: 12rpx 19rpx 12rpx 16rpx;
		align-self: flex-end;
		background-color: #000;
		margin-bottom: 35rpx;
	}

	.van-popup {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.pop-container {
		background-repeat: no-repeat;
		background-size: 100%;
		height: 640rpx;
		width: 510rpx;
		position: relative;
		background-image: url('https://cdn.zkjialan.com/img1/jifen_popBg.png');
	}

	.u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.header-score {
		font-size: 67rpx;
		line-height: 67rpx;
		// font-weight: bold;
		font-family: 'ab';
		padding-top: 110rpx;
		padding-bottom: 150rpx;
		// color: #FF2C3C;
		color: #c5372e;
	}

	.desc {
		color: white;
		background: linear-gradient(82deg, rgba(250, 81, 50, 1) 0%, rgba(236, 60, 34, 1) 49%, rgba(250, 83, 50, 1) 100%);
		padding: 16rpx 22rpx 16rpx 42rpx;
		text-align: center;
	}

	.box {}

	.bottom-box {
		margin-top: 120rpx;
		text-align: center;
	}

	.primary-btn {
		margin: 20rpx 130rpx !important;
		width: 250rpx;
		height: 74rpx;
		border-radius: 37rpx;
		// padding: 16rpx 190rpx;
		text-align: center;
		line-height: 74rpx;
		// background: linear-gradient(#f95f2f 0%, #ff2c3c 100%);
		background: linear-gradient(#f08229 0%, #f08229 100%);
		font-family: 'ar';
	}

	.gray {
		background-color: #bdbdbd !important;
		color: #fff !important;
	}

	.contain1 {
		width: 670rpx;
		height: 470rpx;
		background: url('https://cdn.zkjialan.com/img/user/signBg1.png');
		background-size: 100% 100%;
		margin-left: 20rpx;
		overflow: hidden;
	}

	page {
		background-color: #ffffff !important;
	}
</style>